import React, { useHistory } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex, Card } from 'antd';
import { fetchLogin } from '@/api/api';
import styles from './index.module.scss';

const Login = () => {
    const history = useHistory();

    const onFinish = () => {
        fetchLogin().then(res => {
            console.log(res, '这是个什么')
            if (res.token) {
                cookie.set('Authorization', 'Bearer ' + res.token)
                history.push("/home");
            }
        })
    };

    return (
        <Flex justify="center" align="center" className={styles.login}>
            <Card>
                <Form
                    name="normal_login"
                    className={styles.loginForm}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记住密码</Checkbox>
                        </Form.Item>
                        <a className={styles.forgot} href="">
                            忘记密码
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className={styles.button}>
                            登 录
                        </Button>
                        <Flex justify="flex-end">
                            <a className={styles.register} href="">注册</a>
                        </Flex>

                    </Form.Item>
                </Form>
            </Card>
        </Flex>
    );
};
export default Login;
